Form Design Patterns

https://gyazo.com/1c93247ebd71caac8e5eac3926694305

サンプルフォーム

読書メモ

第1章 登録フォーム

入力操作の不可軽減、ミドルネーム対応のために姓・名でフィールドを分けないほうがいい

ユーザー体験を良くする

見やすくする

聞きやすくする

インタラクションを行いやすくする

理解しやすくする

ラベルはフォームのユーザー体験を向上できる

読める

スクリーンリーダーで聞ける

フィールドにフォーカスできる

ヒントの提供

必須ではない

ヒントとして適切なものではない

code:filed-aria-label.html

<label for="password">password</label>

<p class="field-hint" id="password-hint">Please enter at least 8 characters, including at least 1 digit and at least 1 capital letter.</p>

<input type="password" id="password" name="password" aria-describedby="password-hint">

フロートラベル

第7章 フィルターフォーム

ユーザーを欺くことになる